<template>
    <div>
        <!-- 第一种方式 -->
        <!-- <Student :getStudentName="getStudentName" :name="name" :sex="sex" :age="age"></Student> -->
        <!-- 第二种方式自定义方法 -->
        <!-- <Student @getStudentName.once="getStudentName" :name="name" :sex="sex" :age="age"></Student> -->
        <!-- 第三种使用ref -->
        <Student ref="student" @click.native="show" :name="name" :sex="sex" :age="age"></Student>
    </div>
</template>

<script>
import Student from './components/Student.vue';
export default {
    name: "App",
    //汇总所有的组件
    components: {
        Student
    },
    data() {
        return {
            name: "hjjjj",
            age: 17,
            sex: '男'
        }
    },
    methods: {
        getStudentName(name, ...params) {
            console.log(name, params);
        },
        show(){
            alert(this.name)
        }
    },
    mounted() {
        // this.$refs.student.$on("getStudentName",this.getStudentName)
        this.$refs.student.$once("getStudentName",this.getStudentName)

    }
}
</script>